import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { DayStrip, LargestGrid, TopEvents, TopLists } from '@/components/history/HistoryViews';
import { Section, Stat } from '@/components/ui/primitives';
import { apiGet } from '@/lib/api';
import { MONTH_NAMES, fmt, fmtInt } from '@/lib/format';
import type { HistorySummary } from '@/lib/types';

export const dynamic = 'force-dynamic';

type Params = Promise<{ year: string; month: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { year, month } = await params;
  const name = MONTH_NAMES[Number(month) - 1] ?? month;
  return { title: `History ${name} ${year}`, description: `Daily Global Internet Pressure for ${name} ${year} with the largest events and most affected networks.` };
}

export default async function HistoryMonthPage({ params }: { params: Params }) {
  const { year, month } = await params;
  const y = Number(year);
  const m = Number(month);
  if (!/^\d{4}$/.test(year) || !(m >= 1 && m <= 12)) notFound();
  const s = await apiGet<HistorySummary>(`/api/v1/history/summary?year=${y}&month=${m}`);
  const days = s.days ?? [];
  const max = days.length ? Math.max(...days.map((d) => d.max)) : null;
  const min = days.length ? Math.min(...days.map((d) => d.min)) : null;
  const avg = days.length ? days.reduce((a, d) => a + d.avg, 0) / days.length : null;
  const events = days.reduce((a, d) => a + d.events, 0);
  const idx = s.available_months.indexOf(`${year}-${String(m).padStart(2, '0')}`);
  const prev = idx > 0 ? s.available_months[idx - 1] : null;
  const next = idx >= 0 && idx < s.available_months.length - 1 ? s.available_months[idx + 1] : null;
  const toHref = (ym: string) => `/history/${ym.split('-')[0]}/${Number(ym.split('-')[1])}`;
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">
          <Link href="/history" className="hover:text-ink">
            History
          </Link>{' '}
          ·{' '}
          <Link href={`/history/${year}`} className="hover:text-ink">
            {year}
          </Link>
        </p>
        <div className="mt-1 flex flex-wrap items-baseline gap-4">
          <h1 className="text-[26px] font-medium tracking-tight sm:text-[32px]">
            {MONTH_NAMES[m - 1]} <span className="num">{year}</span>
          </h1>
          <nav className="num flex gap-2 text-[12px]" aria-label="Adjacent months">
            {prev && (
              <Link href={toHref(prev)} className="text-ink-2 hover:text-ink">
                ← {prev}
              </Link>
            )}
            {next && (
              <Link href={toHref(next)} className="text-ink-2 hover:text-ink">
                {next} →
              </Link>
            )}
          </nav>
        </div>
        <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-5">
          <Stat label="days observed" value={fmtInt(days.length)} />
          <Stat label="max" value={<span style={{ color: max == null ? undefined : `var(--p-${max <= 10 ? 'calm' : max <= 25 ? 'normal' : max <= 40 ? 'elevated' : max <= 55 ? 'stressed' : max <= 70 ? 'high' : max <= 85 ? 'severe' : 'extreme'})` }}>{fmt(max)}</span>} />
          <Stat label="avg" value={fmt(avg)} />
          <Stat label="min" value={fmt(min)} />
          <Stat label="events" value={fmtInt(events)} />
        </div>
      </header>
      <Section label="Calendar" right={<span>daily max pressure</span>}>
        <DayStrip days={days} year={y} month={m} />
      </Section>
      <Section label="Largest events">
        <LargestGrid largest={s.largest} />
      </Section>
      <TopLists s={s} />
      <Section label="Events this month">
        <TopEvents events={s.top_events.filter((e) => e.started_at.startsWith(`${year}-${String(m).padStart(2, '0')}`))} />
      </Section>
    </div>
  );
}